
import React, { Component } from "react";
import { Carousel, Image, Typography, Divider, Table, Rate, Tabs, DatePicker,Input, Button, Modal, Badge, Progress, Popconfirm } from 'antd';
import { s } from '../../assets/images/111.jpeg'
import styles from './productManagement.css';
import { ArrowUpOutlined, ArrowDownOutlined, RedoOutlined, CaretDownOutlined, CaretUpOutlined, PlusCircleOutlined, CloseCircleOutlined,
           } from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
import { message } from "antd";
const { TabPane } = Tabs;
const contentStyle = {
  height: '600px',
  color: '#fff',
  lineHeight: '600px',
  textAlign: 'center',
};
const contents ={
  width:'90%',
  margin:'0 auto'
}
const { Title } = Typography;
var ops1 = {};
var ops2 = {};
const views =[ '西安市陕鼓集团股份有限公司','陕汽集团股份有限公司','法士特齿轮有限责任公司','西安五一炼钢厂股份有限公司','西安陕煤集团股份有限公司','陕西重金属冶炼有限公司','陕西第二煤炭焦化集团股份有限公司','西安秦华天然气有限责任公司','西安市供热发电厂股份有限公司','西安市地热新能源供暖有限责任公司']
const views2 =[ '西安市纺织城集团股份有限公司','西安市爱菊粮油有限责任公司','长安花菜籽油有限公司','西安润滑膏有限责任公司','西安市安踏体育用品股份有限公司','西安五环体育用品有限公司','西安市百宝箱集团','爱丽舍厨具用品有限公司','西安冰峰汽水有限责任公司','西安市罗斯纸业股份有限公司']
const views3 =[ '西安华为研究所','西安科大讯飞研发中心','西安小米分公司研发部','腾讯数字小镇数字研发部','阿里巴巴丝路国际中心研发中心','京东西北物流研发中心','海康威视西安研发中心','中国移动集成研发中心','平安西安智慧数据研发中心','汇丰银行西安研发中心','美团西安数据研发中心']

export default class extends Component {
  constructor() {
    super();
    this.state = {
      img1: 'src/assets',
      data:[],
      data2:[],
      data3:[],
      loading:false,
      names:'',
      total1:0,
      total2:0,
      total3:0,
      loadings:false,
      defaultDate:null,
      recordVisible:false,
      recordTableData:[],
      columns: [
        { title: '企业名称', dataIndex: 'name', key: 'name',width:210, ellipsis:true},
        { title: '法人代表', dataIndex: 'juridical', key: 'juridical' },  
        { title: '营业执照编号', dataIndex: 'BusinessLicense', key: 'BusinessLicense',width:150 },  
        { title: '公司类型', dataIndex: 'BusinessType', key: 'BusinessType',width:130},  
        { title: '注册资金', dataIndex: 'RegisteredCapital', key: 'RegisteredCapital' },  
        { title: '生产进度', dataIndex: 'rate', key: 'rate',
          render(_,record) {
            return (
              <div>
                   <Progress status="active" percent={record.rate} size="small" />
              </div>
            );
          }
         },  
        { title: '物资数量', dataIndex: 'count', key: 'count',align:'center' },  
        { title: '企业营收', dataIndex: 'income', key: 'income' },  
        { title: '员工人数', dataIndex: 'age', key: 'age' },
        { title: '增长率', dataIndex: 'compared', key: 'compared' },
        { title: '评级', dataIndex: 'star', key: 'star', width:160 },
        { title: '注册地址', dataIndex: 'address', key: 'address',width:180,ellipsis:true },
        {
          title: '操作',
          dataIndex: '',
          key: 'x',
          width:150,
          render: (_,record) => {
            return(
              <span>
                <a onClick={()=>{this.detailInfo(record)}}>查看详情</a>
                <Popconfirm
                  title="确定删除当前数据吗？"
                  onConfirm={this.confirms}
                  okText="确定"
                  cancelText="取消"
                >
                  <a  style={{marginLeft:10,color:'#f14c4c'}}>删除</a>
                </Popconfirm> 
              </span>
            )
          },
        },
      ],      
      recordColumns: [
        {
          title: '业务订单名称',
          dataIndex: 'name',
          width:170,
          ellipsis:true,
        },       
        {
          title: '年度',
          dataIndex: 'year',   
          ellipsis:true,    
          align:'center'
        },              
        {
          title: '一季度',
          dataIndex: 'cpu',   
          ellipsis:true,    
          render:(_,record) =>  record.cpu
        },
        {
          title: '二季度',
          dataIndex: 'storage',
          ellipsis:true,
          render:(_,record) =>  record.storage
        },
        {
          title: '三季度',
          dataIndex: 'disc',
          ellipsis:true,
        },
        {
          title: '四季度',
          dataIndex: 'network',
          ellipsis:true,
        }, 
        {
          title: '营业额',
          dataIndex: 'count',
          ellipsis:true,
        },           
        {
          title: '年度电能消耗',
          dataIndex: 'power',   
          ellipsis:true,  
          width:100,  
          align:'center'
        },           
        {
          title: '订单量',
          dataIndex: 'temperature',
          ellipsis:true,
        },                      
        {
          title: '同比增长',
          dataIndex: 'rate',
          ellipsis:true,
        },                          
      ],  
    };
  }

  componentDidMount() {
    this.updateData();
    this.getOps();
    this.getRecord();
    window.scrollTo(0, 0);
  }

  getOps = () =>{
    this.getOption();
    this.getOption2();
  }

  confirms = () =>{
    message.success('数据删除成功!')
    this.updateData();
  }

  updateData = () =>{
    this.setState({ 
      loading: true,
      data:[],
      data2:[],
      data3:[],
      total1:0,
      total2:0,
      total3:0,
     });
    setTimeout(() => {
      this.setState({
        loading: false,
      });
      this.getDatas();
      this.getDatas2();
      this.getDatas3();      
    }, 1000);
  }

  callback = (key) => {
    console.log(key);
  }

  getOption = () =>{
    ops1 = {
          title: {
            text: '西安市产业产值及占比情况',
            left: 'center'
          },    
          color:['#07D2F9','#5C7BD9','#9FE080', '#FFDC60'],  
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '15%',
            left: 'center'
          },
          series: [
            {
              name: '各产业占比情况(%)',
              type: 'pie',
              radius: ['35%','50%'],
              center: ['50%', '60%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
              },
              label:{
                formatter:function(data){
                  return `${data.name} ${data.value}亿元 
                    占比${data.percent.toFixed(1)}%`
                }    
              },
              labelLine: {
                show: true
              },
              data: [
                { value: 31, name: '第一产业' },
                { value: 19, name: '第二产业' },
                { value: 55, name: '第三产业' },
                { value: 12, name: '第四产业' }
              ]
            }
          ]
    }
  }

  getOption2 = () =>{
     ops2 = {
      color:['#5470c6','#91cc75','#fac858', '#ee6666', '#73c0de', '#3ba272'],  
      title: {
        text: '去年产值12个月增长变化趋势',
        left: 'center',
        top:0
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['重工业制造', '轻工业制造', '服务业发展', '高新技术制造'],
        top: '7%',
        left: 'center'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      // toolbox: {
      //   feature: {
      //     saveAsImage: {}
      //   }
      // },
      xAxis: {
        type: 'category',
        name: "月份",
        nameTextStyle: {
          color: "#aaa",
          nameLocation: "start",
        },
        data: ['2021/01', '2021/02', '2021/03', '2021/04', '2021/05', '2021/06', '2021/07','2021/08','2021/09','2021/10','2021/11','2021/12']
      },
      yAxis: {
        type: 'value',
        name: "单位（万元）",
        nameTextStyle: {
          color: "#aaa",
        },
        axisLabel: {
          formatter: '{value}亿元'
        }
      },
      series: [
        {
          name: '重工业制造',
          type: 'line',
          smooth: true,
          data: [20, 130, 136, 134, 158, 159, 140, 141, 147, 150, 154, 143]
        },
        {
          name: '轻工业制造',
          type: 'line',
          smooth: true,
          data: [35, 110, 135, 184, 189, 190, 180, 179, 161, 152, 150, 142]
        },
        {
          name: '服务业发展',
          type: 'line',
          smooth: true,
          data: [29, 159, 178, 189, 168, 169, 170, 152, 142, 124, 114, 107]
        },
        {
          name: '高新技术制造',
          type: 'line',
          smooth: true,
          data: [26, 159, 185, 168, 169, 177, 184, 180, 181, 179, 182, 186]
        },       
      ]
    };
  }

  onDateChange = (date, dateString) => {

    this.setState({defaultDate:date},()=>{
      this.updateData();
    })
    console.log(date, dateString,);
  }

  nameChange = (e) =>{
    console.log('eee',e.target.value);
    this.setState({names:e.target.value})
  }

  onPressEnter = (e) =>{
    this.updateData();
  }

  reset = () =>{
    this.setState({names:'',defaultDate:''},()=>{
      this.updateData();
    })
  }

  getDatas = ()=>{
    let datas= [];
    for (let i = 0; i < 14; i++) {
      datas.push({
          key: i,
          name: views[Math.floor(Math.random() * 10)],
          income: Math.floor(Math.random() * 100)+' 亿元',
          age:  Math.floor(Math.random() * 10)+' 万人',
          compared: i%2 == 0 ? <span style={{color:'#3f8600'}}><CaretUpOutlined style={{color:'#3f8600'}} />{Math.floor(Math.random() * 10)+'%'}</span> : <span style={{color:'#cf1322'}}><CaretDownOutlined style={{color:'#cf1322'}}/>{Math.floor(Math.random() * 10)+'%'}</span> ,
          address: Math.floor(Math.random() * 100) >= 50 ? `西安市雁塔区锦业路第${i}号` : `西安市高新区锦业${i}路第${i+12}号`,
          description: i%2 == 0 ? '景区人员拥挤，注意防疫': '景区人员稀疏,安全系数高',
          star:  i%2 == 0 ? <Rate disabled style={{marginLeft:5}} defaultValue={3} /> : <Rate disabled style={{marginLeft:5}} defaultValue={5} />,
          grade: Math.floor(Math.random() * 10)+'级',
          ranking: Math.floor(Math.random() * 100),
          count:Math.floor(Math.random() * 10000)+'件',
          juridical: i%4 == 0 ? '高亚丽': i%4 == 1 ? '刘佳佐' :  i%4 == 2 ? '吴国强' : i%4 == 3 ? '何国伟' :'李嘉熙',
          RegisteredCapital: Math.floor(Math.random() * 100)+'万',
          rate: Math.floor(Math.random() * 100),
          BusinessLicense: `4109001000${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`,
          BusinessType: i%4 == 0 ? '有限责任公司': i%4 == 1 ? '无限公司' :  i%4 == 2 ? '两合公司' : i%4 == 3 ? '股份有限责任公司' :'股份两合公司',
      });
    };
    let filters = [];
    if(this.state.names === ''){
      filters = datas;
    }else{
      datas.forEach((_,index)=>{
        if(_.name.includes(this.state.names)){
          filters.push(_)
        }
      });
    }
    this.setState({data:filters,total1:filters.length})
  }  

  getDatas2 = ()=>{
    let datas= [];
    for (let i = 0; i < 24; i++) {
      datas.push({
          key: i,
          name: views2[Math.floor(Math.random() * 10)],
          income: Math.floor(Math.random() * 100)+' 亿元',
          age:  Math.floor(Math.random() * 10)+' 万人',
          compared: i%2 == 0 ? <span style={{color:'#3f8600'}}><ArrowUpOutlined style={{color:'#3f8600'}} />{Math.floor(Math.random() * 10)+'%'}</span> : <span style={{color:'#cf1322'}}><ArrowDownOutlined style={{color:'#cf1322'}}/>{Math.floor(Math.random() * 10)+'%'}</span> ,
          address:  Math.floor(Math.random() * 100) >= 50 ? `西安市莲湖区桃源路第${Math.floor(Math.random() * 100)}号` : `西安市未央区路第${Math.random() * 100}号`,
          description: i%2 == 0 ? '景区人员拥挤，注意防疫': '景区人员稀疏,安全系数高',
          star:  i%2 == 0 ? <Rate disabled style={{marginLeft:5}} defaultValue={3} /> : <Rate disabled style={{marginLeft:5}} defaultValue={5} />,
          grade: Math.floor(Math.random() * 10)+'级',
          ranking: Math.floor(Math.random() * 100),
          count:Math.floor(Math.random() * 10000)+'件',
          juridical: i%4 == 0 ? '钱雷翔': i%4 == 1 ? '吴佳合' :  i%4 == 2 ? '魏艳婷' : i%4 == 3 ? '刘芳' :'霍启千',
          RegisteredCapital: Math.floor(Math.random() * 100)+'万',
          rate: Math.floor(Math.random() * 100),
          BusinessLicense: `4109001000${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`,
          BusinessType: i%4 == 0 ? '有限责任公司': i%4 == 1 ? '无限公司' :  i%4 == 2 ? '两合公司' : i%4 == 3 ? '股份有限责任公司' :'股份两合公司',
      });
    }
    let filters = [];
    if(this.state.names === ''){
      filters = datas;
    }else{
      datas.forEach((_,index)=>{
        if(_.name.includes(this.state.names)){
          filters.push(_)
        }
      });
    }
    this.setState({data2:filters,total2:filters.length})
  }    

  getDatas3 = ()=>{
    let datas= [];
    for (let i = 0; i < 18; i++) {
      datas.push({
          key: i,
          name: views3[Math.floor(Math.random() * 10)],
          income: Math.floor(Math.random() * 100)+' 亿元',
          age:  Math.floor(Math.random() * 10)+' 万人',
          compared: i%2 == 0 ? <span style={{color:'#3f8600'}}><ArrowUpOutlined style={{color:'#3f8600'}} />{Math.floor(Math.random() * 10)+'%'}</span> : <span style={{color:'#cf1322'}}><ArrowDownOutlined style={{color:'#cf1322'}}/>{Math.floor(Math.random() * 10)+'%'}</span> ,
          address: Math.floor(Math.random() * 100) >= 50 ? `西安市雁塔区繁花${Math.floor(Math.random() * 10)}路第${i+2}号` : `西安市高新区锦业${i}路第${i+12}号`,
          description: i%2 == 0 ? '景区人员拥挤，注意防疫': '景区人员稀疏,安全系数高',
          star:  i%2 == 0 ? <Rate disabled style={{marginLeft:5}} defaultValue={4} /> : <Rate disabled style={{marginLeft:5}} defaultValue={5} />,
          grade: Math.floor(Math.random() * 10)+'级',
          ranking: Math.floor(Math.random() * 100),
          count:Math.floor(Math.random() * 10000)+'件',
          juridical: i%4 == 0 ? '张作伟': i%4 == 1 ? '赵文军' :  i%4 == 2 ? '孙柳' : i%4 == 3 ? '李和昌' :'周煜千',
          RegisteredCapital: Math.floor(Math.random() * 100)+'万',
          rate: Math.floor(Math.random() * 100),
          BusinessLicense: `4109001000${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}${Math.floor(Math.random() * 10)}`,
          BusinessType: i%4 == 0 ? '有限责任公司': i%4 == 1 ? '无限公司' :  i%4 == 2 ? '两合公司' : i%4 == 3 ? '股份有限责任公司' :'股份两合公司',          
      });
    }
    let filters = [];
    if(this.state.names === ''){
      filters = datas;
    }else{
      datas.forEach((_,index)=>{
        if(_.name.includes(this.state.names)){
          filters.push(_)
        }
      });
    }
    this.setState({data3:filters,total3:filters.length})
  }  

  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
  }

  onChartClick(param,echarts){
    console.log(param);
    this.updateData();
  }  

  onChartLegendselectchanged(param,echarts){
    console.log(param)
  }

  detailInfo = (row) => {
    console.log(row);
    this.setState({recordVisible:true});
  }

  handleOk = () => {
    this.setState({recordVisible:false});
  }

  onRecordEvents(param,echarts){
   
  }

  getRecordOption = () =>{
    let op = [];
    for (let index = 0; index < 31; index++) {
      op.push(Math.floor(Math.random()*200));
    }
    console.log('数据--->',op);
    return {
      title:{
        text:'上月企业订单量',
        left:'center',
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#69b5fb"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', 
        '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'订单(百件)',
        textStyle:{
          marginLeft:20
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: op,
          type: 'bar',
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          emphasis: { // 选中时的颜色
            normal:{
              itemStyle: { // 使用方法一的写法
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'purple' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            }
          }   
        }
      ]
    };
  }

  getIncomeOption = () =>{
    let op = [];
    for (let index = 0; index < 31; index++) {
      op.push(Math.floor(Math.random()*200));
    }
    console.log('数据--->',op);
    return {
      title:{
        text:'上月企业营业额变化趋势图',
        left:'center',
        textStyle:{
          color:'#aaa',
          fontSize:14,
          fontWeight:500
        }
      },
      grid:{
        top:28,
        left:28,
        right:20,
        bottom:18
      },
      color: ["#69b5fb"], 
      xAxis: {
        type: 'category',
        nameLocation: 'middle',
        data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', 
        '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日'],
        axisTick: {
          lineStyle: {
            color: '#999'
          }
        },
        axisLabel: {
          color: '#999',
          showMinLabel: true,
          showMaxLabel: true,
        },
        axisLine: {
          lineStyle: {
            type: 'solid',
            color: '#999'
          }
        },
        boundaryGap: false
      },
      yAxis: {
        type: 'value',
        name:'金额(万元)',
        splitLine: {
          //网格线
          lineStyle: {
            type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
            width: 1,
            color:"#999"
          },
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer:{
          lineStyle:{
            type:'dashed'
          }
        },
        textStyle: {
          color: '#fff'
        },
        backgroundColor: 'rgba(0,0,0,0.9)',
        confine: true // 超出的部分不会被遮盖
      },
      series: [
        {
          data: op,
          type: 'line',
          showSymbol: false,
          smooth: true,
          lineStyle:{
            color:'#69b5fb'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(105,181,251,0.9)'
            }, {
              offset: 1,
              color: 'rgba(105,181,251,0)'
            }])
          }
        }
      ]
    };
  }

  getRecord = () =>{
    let lists = [];
    for (let i = 0; i < 6; i++) {
      lists.push({
        key: i,
        name: i % 4 == 0 ? '西安市智慧城市云服务能力建设' : i % 4 == 1 ? '城市轨道交通地下管廊工程':  i % 4 == 2 ? '关中环线桥梁建设材料工程':'三环及其环线横向提升工程',
        cpu: Math.floor(Math.random() * 98)+'万元',
        storage: Math.floor(Math.random() * 97)+'万元',
        disc: Math.floor(Math.random() * 95)+'万元',
        network: Math.floor(Math.random() * 200)+'万元',
        acoustic: Math.floor(Math.random() * 100)+'万元',
        temperature: Math.floor(Math.random() * 500)+'件',
        rate: (Math.floor(Math.random() * 50)-25)+'%',
        year: i % 4 == 0 ? '2021' :`201${Math.floor(Math.random() * 10)}`,
        power: Math.floor(Math.random() * 98)+'KW/h',
        count: Math.floor(Math.random() * 998)+'万元',
      });
    }
    this.setState({recordTableData:lists,loadings:false})
  }

  render() {
    const { data, data2, data3, loading, names, total1, total2, columns, total3, defaultDate, recordVisible, recordColumns,
            loadings, recordTableData } = this.state;
    let onEvents={
      'click': this.onChartClick.bind(this),
      'legendselectchanged': this.onChartLegendselectchanged.bind(this)
    }
    let onRecordEvents={
      'click': this.onRecordEvents.bind(this),
    }
    return (
      <>
        <div style={{marginLeft:0}}>
          <Breadcrumbs props={this.props}></Breadcrumbs>
        </div> 
        <Divider />          
        <div style={{width:'94%',height:'100%',margin:'0 auto'}}>
        <div style={{textAlign:'left',marginTop:20,marginBottom:20}}>
          <Title level={5}>西安市产业生产占比及趋势</Title>
        </div>   
        <div>
            <div style={{width:600,height:280,float:'left'}}>
                <ReactEcharts
                    option={ops1} 
                    onEvents={onEvents}
                    style={{width:600,height:280}}
                />
            </div>
            <div style={{width:900,height:280,float:'left'}}>
                <ReactEcharts
                    option={ops2} 
                    onEvents={onEvents}
                    style={{width:900,height:280}}
                />
            </div>                       
        </div> 
        <Divider />
        <div>
          <div style={{textAlign:'left',marginBottom:15,marginTop:35}}>
            <Button icon={<PlusCircleOutlined />} onClick={this.reset} style={{marginRight:20}} type="primary">新增数据</Button>
            <Button icon={<CloseCircleOutlined />} onClick={this.reset} style={{marginRight:50}} type="primary">下架</Button>
            <span style={{marginRight:20}}>
              企业名称: <Input value={names} style={{width:200,marginLeft:5}} onChange={this.nameChange} onPressEnter={this.onPressEnter} allowClear={true} placeholder="请输入企业名称回车搜索" />
            </span>
            <span style={{marginRight:20}}>
                日期: <DatePicker style={{width:300,marginLeft:5}} defaultValue={defaultDate} onChange={this.onDateChange} />
            </span>  
            <span style={{marginRight:20}}>
                <Button icon={<RedoOutlined />} onClick={this.reset}>重置</Button>
            </span>          
          </div>
          <Tabs defaultActiveKey="1" onChange={this.callback}>
              <TabPane tab="重工业生产" key="1">
                <div>
                    <Table
                      columns={columns}
                      loading={loading}
                      size="small"
                      pagination={{pageSize:5,
                        total:{total1},
                        showTotal:(total) => `共 ${total} 个`,
                      }}
                      dataSource={data}
                    />
                </div>                
              </TabPane>
              <TabPane tab="轻工业生产" key="2">
                <div>
                    <Table
                      columns={columns}
                      loading={loading}
                      size="small"
                      pagination={{pageSize:5,
                        total:{total2},
                        showTotal:(total) => `共 ${total} 个`,
                      }}
                      dataSource={data2}
                    />
                </div> 
              </TabPane>
              <TabPane tab="高新技术产业" key="3">
                <div>
                    <Table
                      columns={columns}
                      loading={loading}
                      size="small"
                      pagination={{
                        pageSize:5, 
                        total:{total3},
                        showTotal:(total) => `共 ${total} 个`,
                        onShowSizeChange: this.onShowSizeChange
                      }}
                        dataSource={data3}
                    />
                </div> 
              </TabPane>              
          </Tabs>
        </div>
        <Modal title="企业营业收入详情" visible={recordVisible} onOk={this.handleOk} width={888} onCancel={()=>{this.setState({recordVisible:false})}}>
            <div className='echartContent' style={{display:'flex',justContent:'flex-start'}}>
                <ReactEcharts
                    option={this.getRecordOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:406,height:162}}
                />   
                <ReactEcharts
                    option={this.getIncomeOption()} 
                    notMerge={true}
                    lazyUpdate={true}
                    onEvents={onRecordEvents}
                    style={{width:406,height:162}}
                />                                       
            </div>
            <Table size="small" style={{width:'100%',margin:'5px 2px',background:'#fff',overflow:"hidden"}} 
                columns={recordColumns} loading={loadings} dataSource={recordTableData} 
                    pagination={{
                    pageSizeOptions:['5','10','20'],
                    pageSize:5,
                    showSizeChanger: true,
                    onShowSizeChange:this.onShowSizeChange,
                    showTotal: (total) => `总数${total}`
              }}/>
          </Modal>          
        </div>
      </>

    )
    }
}
